<template>

    <div class="charts_wrap">
        <div class="header">
            <div class="title">
                <i class="el-icon-s-data" style="color: rgb(24, 144, 255);"></i>访问量
            </div>
            <div class="other">
                <el-button type="text">今日</el-button>
                <el-button type="text">本月</el-button>
                <el-button type="text">全年</el-button>
                <el-date-picker
                    class="ml10"
                    style="width: 250px"
                    v-model="daterange"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </div>
        </div>
        <div class="content">
            <div class="charts_wrap">
                <div ref="mychart" class="mychart"></div>
            </div>
            <div class="list_wrap">
                <div class="title">访问量排行</div>
                <div class="item_wrap" v-for="(item, index) of list" :key="index">
                    <div class="left">
                        <div class="num">{{index+1}}</div>
                        <div class="name">{{item.name}} {{index+1}} 号</div>
                    </div>
                    <div class="right">{{item.total|separateNum}}</div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

import { mapGetters } from 'vuex'
export default {
    name: 'AccessCharts',
    components: {
    },
    data() {
        return {
            echarts: null,
            month: [
                '1月', '2月', '3月', '4月', '5月', '6月',
                '7月', '8月', '9月', '10月', '11月', '12月'
            ],
            datas: [
                33, 68, 55, 88, 99, 143,
                44, 222, 321, 108, 36, 188
            ],

            list: [
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789},
                {'name': '东直门', total: 456789}
            ],
            daterange: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    computed: {
        ...mapGetters(['user'])
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
            window.addEventListener('resize', this.screenAdapter)
        })
    },

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter)
    },

    methods: {

        initChart() {
            this.echarts = this.$echarts.init(this.$refs.mychart, 'macarons')
            this.echarts.setOption({
                title:{
                    text: '访问趋势',
                    top: '8px',
                    left: '8px',
                    textStyle: {
                        fontSize: 14,
                        color: '#515a6e',
                        fontWeight: 'bold'
                    }
                },
                grid: {
                    top: '50px',
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    data: this.month
                },
                yAxis: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        z: 0
                    }
                },
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: this.datas,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        // 圆角
                        // barBorderRadius: [33, 33, 0, 0],
                        // 渐变
                        color: '#188df0',
                        // color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        //     // { offset: 0, color: 'blue' },
                        //     // { offset: 1, color: 'red' }
                        //     // {offset: 0, color: '#83bff6'},
                        //     // {offset: 1, color: '#188df0'}
                        // ])
                    }
                }]
            });
        },

        screenAdapter() {
            this.echarts.resize()
        }

    }

}
// option = {
//     xAxis: {
//         type: 'category',
//         boundaryGap: false,
//         show:false,
//         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//     },
//     yAxis: {
//         type: 'value',
//         show:false
//     },
//     series: [{
//         data: [820, 932, 901, 934, 1290, 1330, 1320],
//         type: 'line',
//         areaStyle: {
//              opacity: 0.3
//         },
//          smooth: true
//     }]
// };

</script>

<style lang="scss" scoped>
.charts_wrap{
    background: #fff;
    .header{
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 0 10px;
    }

    .content{
        display: flex;

        .charts_wrap{
            flex: 1;

            .mychart{
                font-size: 14px;
                height: 400px;
                width: 100%;
            }
        }
        .list_wrap{
            width: 400px;
            display: flex;
            flex-direction: column;
            .title{
                height: 40px;
                display: flex;
                align-items: center;
                font-weight: 600;
            }
            .item_wrap{
                display: flex;
                justify-content: space-between;
                padding: 10px;
                .left{
                    display: flex;
                    .num{
                        margin-right: 10px;
                    }
                }
                .right{
                    display: flex;
                }
            }
        }
    }
}
</style>
